<template>
  <div class="set-info">
    <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>个人信息</span>
            <van-icon @click="onSave">保存</van-icon>
    </header>
    <van-cell-group class="content" v-if="tag == 'nickname'">
      <van-field v-model="value" placeholder="最多可输入15个字" maxlength="15" />
    </van-cell-group>
    <div class="subject" v-else-if="tag == 'subjects'">
      <ul>
        <li v-for="(item,index) in value" :key="index">         
          <input type="checkbox" v-model="sub" :value="item.id">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
    <ul class="content" v-else>
      <li :class="{active:value==0}" @click="onSex(0)">男</li>
      <li :class="{active:value==1}" @click="onSex(1)">女</li>
    </ul>
  </div>
</template>

<script>
import Header from "@/components/Header";
import { user } from "@/request/api.js";

export default {
  name: "set-info",
  components: {
    Header
  },
  data() {
    return {
      title: {
        name: "修改个人信息"
      },
      value: this.$route.query.value,
      tag: this.$route.query.tag,
      sub:this.$route.query.select?this.$route.query.select:[],
    };
  },
  created() {},
  methods: {
    onSave() {
      switch (this.tag) {
        case "nickname":
          if (!this.value) {
            this.$toast("昵称不能为空");
            return;
          }
          user({ nickname: this.value }).then((res) => {
            console.log(res)
            this.$router.go(-1);
          });
          break;
        case "sex":
          if (this.value) this.value = 1;
          else this.value = 0;
          user({ sex: this.value }).then((res) => {
            console.log(this.value)
            this.$router.go(-1);
          });
          break;
        case "subjects":
          let subDate = [];
          this.sub.forEach(res => {
            let d = {attr_id:2,attr_val_id:res}
            subDate.push(d)
          });
          user({user_attr:JSON.stringify(subDate)}).then(() => {
            console.log(JSON.stringify(subDate))
            this.$router.go(-1);
          });
          break;
      }
    },
    onSex(val) {
      this.value = val;
    },
    back(){
        this.$router.go(-1);
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/CSS/index.scss";
.set-info {
  min-height: 100vh;
  background: #f0f2f5;
  box-sizing: border-box;
  .content {
    margin-top: 20px;
  }
  header{
    width:100%;
    border-bottom:1px solid #f4f4f4;
    height:42px;
    display:flex;
    padding-top: 5px;
    background:white;
    .van-icon{
        flex:1;
         text-align:center;
    }
    span{
        flex:3;
        font-size:20px;
        padding-left: 80px;
    }
}
  ul {
    background: #fff;
    margin: 20px 0;
    padding: 10px 30px;
    li {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      color: #595959;
      position: relative;
      &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 1px;
        background-color: #f5f5f5;
      }
      &:last-child:after {
        display: none;
      }
      &.active {
        background: url("~@/assets/theme-img/icon-check.png") no-repeat right
          center;
        background-size: 30px 30px;
      }
    }
  }
  .subject{
    input{
      width: 30px;
      height: 30px;
      margin-right: 20px;
      float: left;
    }
    span{
      display: inline-block;
      height: 50px;
      line-height: 50px
    }
  }
}
</style>